<template>
  <div style="text-align: start;">
    <el-row :gutter="10">
      <el-col :span="7">
        <el-card style="height: 342px">
          <div>
            <span class="fund-manager-title">基金经理</span>
            <div class="fund-manager-avatar">
              <!-- 头像 -->
              <el-image
                v-for="(img,index) in avatarImages"
                :key="index"
                style="width: 90px;border: 1px solid #000000;padding: 1px;display:block;"
                :src="img"
                @error="errorHandler"
              />
              <!-- 姓名 -->
              <span style="font-weight: bold;margin-top: 10px;margin-bottom: 5px;">{{ fundManager.name }}</span>

              <!-- 评分 -->
              <el-rate
                v-model="fundManager.star"
                disabled
                show-score
                show-text
                :texts="['极差', '失望', '一般', '满意', '惊喜']"
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
            <div style="display: flex;flex-direction:row;justify-content: space-around;">
              <!-- 个人简介 -->
              <!--              <span>{{ fundManager.description }}</span>-->

              <!-- 起始任职日期 -->
              <!--              <div>-->
              <!--                <span class="fund-manager-subtitle">起始任职日期：</span>-->
              <!--                <span class="fund-manager-subtitle-v" style="display: block">{{ fundManager.startDate }}</span>-->
              <!--              </div>-->

              <!-- 任职时长 -->
              <div>
                <span class="fund-manager-subtitle">任职时长</span>
                <span class="fund-manager-subtitle-v" style="display: block">{{ fundManager.workTime }}</span>
              </div>

              <!-- 基金规模 -->
              <div>
                <span class="fund-manager-subtitle">基金规模</span>
                <span class="fund-manager-subtitle-v" style="display: block">{{ fundManager.fundSize }}</span>
              </div>
              <!--              &lt;!&ndash; 任期回报 &ndash;&gt;-->
              <!--              任期回报：{{ fundManager.profit }}%-->
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <!-- 任期回报 -->
          <Profit v-if="showProfit" :profit-data="profitData" />
        </el-card>
      </el-col>

      <el-col :span="9">
        <el-card>
          <!-- 基金经理表现评价 -->
          <performance-evaluation v-if="showPower" :avr="avr" :indicator="indicator" :radar-data="radarData" :dsc="dsc" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryCodeManagerAvatar, queryDataCurrentFundManager } from '@/api/front/fund/fundDataContent'
import Profit from '@/views/front/detail/components/manager/Profit'
import PerformanceEvaluation from '@/views/front/detail/components/manager/PerformanceEvaluation'

export default {
  name: 'FundManager',
  components: {
    PerformanceEvaluation,
    Profit
  },
  props: {
    codeNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showProfit: false,
      showPower: false,
      avr: '',
      indicator: [],
      radarData: [],
      dsc: [],
      fundManager: {},
      isReloadData: true,
      v: 1,
      avatarImages: []
    }
  },
  computed: {
    avatar() {
      return `http://qq7gycsbf.hn-bkt.clouddn.com/fund/avatar/avatar_${this.codeNumber}.png?v=${this.v}`
    },
    // getAvatar() {
    //   return '@/assets/images/manager/' + name + '.jpg'
    // }
    getStar() {
      return Number(this.fundManager.star)
    },
    profitData() {
      return this.fundManager.profit.series[0].data.map(item => item.y)
    }
  },
  mounted() {
    this.fitchDataCurrentFundManager()
  },
  created() {
    this.v = new Date().getTime()
    this.refreshImage()
  },
  beforeDestroy() {

  },
  methods: {
    // 图片加载失败处理
    errorHandler() {
      console.log('图片加载失败')
      // this.fitchCodeInTimeAndRemoveWatermarkImage()
    },
    fitchCodeInTimeAndRemoveWatermarkImage() {
      queryCodeManagerAvatar(this.codeNumber).then(res => {
        // setTimeout(() => {
        //   // this.isReloadData = false
        //   // this.$nextTick(() => {
        //   //   this.isReloadData = true
        //   // })
        //   this.v++
        // }, 2000)
        console.log('queryCodeManagerAvatar', res)
        this.avatarImages = res
      })
    },
    fitchDataCurrentFundManager() {
      queryDataCurrentFundManager(this.codeNumber).then(res => {
        console.log('queryDataCurrentFundManager', res)
        this.fundManager = res[0]

        this.fundManager.star = Number(this.fundManager.star)

        this.dsc = res[0].power.dsc
        this.indicator = res[0].power.categories.map(item => { return { name: item, max: 100 } })
        this.radarData = res[0].power.data

        this.showProfit = true
        this.showPower = true
      })

      queryCodeManagerAvatar(this.codeNumber).then(res => {
        console.log('queryCodeManagerAvatar', res)
        this.avatarImages = res
      })
    }
  }
}
</script>

<style scoped>
.fund-manager-title{
  display: block;
  margin: -16px 0 0;
  height: 54px;
  line-height: 54px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  white-space: pre-wrap;

  margin-left: 5px;
}

.fund-manager-avatar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fund-manager-subtitle{
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #666666;
  letter-spacing: 0;
  line-height: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}

.fund-manager-subtitle-v{
  white-space: nowrap;
  margin: 0;
  font-family: PingFangSC-Medium !important;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 24px;
  width: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
